/*
 * @Author: your name
 * @Date: 2022-03-15 15:24:02
 * @LastEditTime: 2022-04-03 20:14:57
 * @LastEditors: Please set LastEditors
 * @Description: 新建标签弹窗
 * @FilePath: \blog-system-front\src\Pages\Article\article_caterory\addModal.js
 */
import { Form, Input, Tree, Switch } from "antd";
import React, { useEffect, useState } from "react";
import CategoryTreeSelect from "@/components/CategoryTreeSelect";
export default function AddModal(props) {
  const { form, category = [], record = [{}], status = "new" } = props;
  const onSelect = (selectedKeys) => {
    form.setFieldsValue({ parentCategory: selectedKeys[0] });
  };
  useEffect(() => {
    form.setFieldsValue(record[0]);
  }, [record]);

  const [diabled, setDisabled] = useState(true);
  return (
    <Form form={form}  preserve={false}>
      <Form.Item name="category_id" hidden></Form.Item>
      <Form.Item
        name="category_name"
        label="标签名称"
        rules={[{ required: true, message: "请输入标签内容" }]}
      >
        <Input></Input>
      </Form.Item>
      {status === "new" && (
        <Form.Item name="isTopLevel" label="是否为顶级分类">
          <Switch
            disabled={status === "edit"}
            defaultChecked={form.getFieldsValue().isTopLevel === 1}
            onChange={(e) => {
              setDisabled(!e);
            }}
          ></Switch>
        </Form.Item>
      )}
      {status === "new" && diabled && (
        <Form.Item name="parentCategory" label="选择分类">
          <CategoryTreeSelect
              onSelect={onSelect}
              category={category}
            />
        </Form.Item>
      )}
      {!diabled && (
        <Form.Item
          name="childrenValue"
          label="子标签"
          rules={[{ required: true, message: "请输入标签内容" }]}
        >
          <Input disabled={diabled}></Input>
        </Form.Item>
      )}
    </Form>
  );
}
